<div id="rainbow_photoframe_comments_widget">
    <ul>
        {% for comment in photo_instance.comments.all %}
            <li>
                <div style="width:8%;float:left;">
                    <img src="/static/rainbow/images/0/default.jpeg" style="width:100%;"/>
                </div>
                <div style="width:92%;min-height:56px;margin-left:8%;padding-left:2%;">
                    <div>
                        <label style="font-size:24px;color:white;">{{ comment.commentator }}</label>
                        <label>&nbsp;&nbsp;-&nbsp;&nbsp;</label>
                        <label>{{ comment.publish_ms }}</label>
                        <label>说：</label>
                        {% if comment.commentator.id == user.id %}
                            <button style="float:right;margin-right:20px;">
                                <a href="/rainbow/photoframe/{{ photo_instance.id }}/comment/{{ comment.id }}/delete">删除</a>
                            </button>
                        {% endif %}
                    </div>
                    <div>
                        {{ comment.comment }}
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
    <form action="/rainbow/photoframe/{{ photo_instance.id }}/comment/add" method="POST">
        <div style="width:8%;float:left;">
            <img src="/static/rainbow/images/0/default.jpeg" style="width:100%;"/>
        </div>
        <div style="width:92%;min-height:56px;margin-left:8%;padding-left:2%;">
            {% csrf_token %}
            <label for="id_comment">
                <textarea name="comment" id="id_comment" style="border-width:0;width:94%;outline:none;padding:2%;"></textarea>
            </label>
            <button style="float:right;">添加评论</button>
        </div>
    </form>
</div>